<template>
  <view class="container">
    <view class="header"></view>
    <view class="content">
      <view class="flex" @click="$refs.area.open()">
        <view class="name">工作地点</view>
        <view class="flex1">
          <text>{{ province ? province + citys : '请选则' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex" @click="$refs.originaze.open()">
        <view class="name">机构信息来源</view>
        <view class="flex1">
          <text>{{ agency_name ? agency_name : '请选择' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>

      <view class="flex" @click="$refs.require.open()">
        <view class="name">招募信息来源</view>
        <view class="flex1">
          <text>{{ sources_name ? sources_name : '请选择' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex" @click="$refs.age.open()">
        <view class="name">获得驾照年份</view>
        <view class="flex1">
          <text>{{ year ? year : '请选择' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex">
        <view class="name">紧急联系电话</view>
        <view class="flex1">
          <input type="number" placeholder="请输入手机号码" v-model="urgent_mobile" style="text-align: right" />
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 上传图片 -->
      <view style="font-weight: bold; font-size: 28rpx; color: #222222; margin-top: 44rpx; margin-bottom: 14rpx">上传身份证</view>
      <view class="font-weight: 500; font-size: 26rpx; color: #222222;">拍摄证件时确保证件完全处于拍摄框内，边角完整，内容无 遮挡</view>
      <!-- 身份证图片 -->
      <view class="idcard">
        <!-- 正面 -->
        <view @click="uploadimg(1)">
          <image v-if="identity_just" :src="imgurl + identity_just" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <image v-else src="../../static/mine/idcardfront.png" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #222222">人面像</view>
        </view>
        <!-- 反面 -->
        <view @click="uploadimg(2)">
          <image v-if="identity_back" :src="imgurl + identity_back" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <image v-else src="../../static/mine/idcardback.png" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #222222">国徽面</view>
        </view>
      </view>
      <!-- 上传驾驶证 -->
      <view style="font-weight: bold; font-size: 28rpx; color: #222222; margin-bottom: 24rpx; margin-top: 46rpx">上传驾驶证</view>
      <view style="font-weight: 500; font-size: 26rpx; color: #222222; margin-bottom: 24rpx">拍摄证件时确保证件完全处于拍摄框内，边角完整，内容无 遮挡</view>
      <!-- 驾驶证正面 -->
      <view class="carcard" @click="uploadimg(3)">
        <view style="font-weight: 500; font-size: 26rpx; color: #222222">驾驶证正本照</view>
        <image v-if="license_just" :src="imgurl + license_just" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
        <image v-else src="../../static/mine/carcardfront.png" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
      </view>
      <!-- 驾驶证反面 -->
      <view class="carcard" @click="uploadimg(4)">
        <view style="font-weight: 500; font-size: 26rpx; color: #222222">驾驶证副页照</view>
        <image v-if="license_back" :src="imgurl + license_back" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
        <image v-else src="../../static/mine/carcardback.png" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
      </view>
      <!--提交按钮 -->
      <view class="subbtn" @click="submit">提交申请</view>
    </view>
    <!-- 弹框 -->
    <!-- 地区弹框 -->
    <uni-popup ref="area" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.area.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="fnok">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="place" @change="bindChange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in provinceData" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in cityData[0].list" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 机构信息来源 -->
    <uni-popup ref="originaze" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.originaze.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="originazefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="organization" @change="organizationChange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in organizationlist" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 招募信息来源 -->
    <uni-popup ref="require" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.require.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="requirefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="organization" @change="requirechange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in requirelist" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 驾照年份 -->
    <!-- 招募信息来源 -->
    <uni-popup ref="age" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.age.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="agefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="age" @change="agechange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in agelist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// import provinceData from '@/utils/data.js';
export default {
  data() {
    return {
      driverid: '', //司机的id
      imgurl: '',
      province: '', // 省
      citys: '', // 市
      agency_name: '', // 机构
      sources_name: '', // 来源
      year: '', // 年龄
      urgent_mobile: '', // 手机号
      identity_just: '', // 身份证正面
      identity_back: '', //身份证反面
      license_just: '', //驾驶证正面
      license_back: '', //license_back
      age: [0], //驾照年份
      agelist: ['2000', '1998', '1999', '1974'], //年份列表
      require: [0], //招募
      requirelist: [], // 招募列表
      organization: [0], //机构
      organizationlist: [], // 机构列表
      place: [0, 0], // 选择市区
      provinceData: [],
      provinceidnex: 0, // 省份的索引
      provincename: '', // 省份
      cityname: '', //城市的名字
      cityindex: 0, // 城市的索引
      city: '',
      pid: 0
    };
  },
  computed: {
    cityData() {
      return this.provinceData.filter((item) => {
        return item.name == this.provinceData[this.provinceidnex].name;
      });
    }
  },
  onLoad(opt) {
    this.imgurl = this.img;
    // this.provinceData = provinceData;
    console.log('司机的id', opt);
    if (opt.driverid) {
      this.driverid = opt.driverid;
      console.log('司机的id', this.driverid);
    }
    // 获取城市
    this.getcitys();
    // 获取机构
    this.getjigou();
    // 招募来源
    this.getorigin();
  },
  methods: {
    //提交
    submit() {
      if (this.province == '') {
        return uni.showToast({
          title: '请选择工作地点',
          icon: 'none'
        });
      }
      if (this.agency_name == '') {
        return uni.showToast({
          title: '请选择机构',
          icon: 'none'
        });
      }
      if (this.sources_name == '') {
        return uni.showToast({
          title: '请选择信息来源',
          icon: 'none'
        });
      }
      if (this.year == '') {
        return uni.showToast({
          title: '请选择获得驾照年份',
          icon: 'none'
        });
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.urgent_mobile)) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
      }
      if (this.identity_just == '') {
        return uni.showToast({
          title: '请上传正面照',
          icon: 'none'
        });
      }
      if (this.identity_back == '') {
        return uni.showToast({
          title: '请上传反面照',
          icon: 'none'
        });
      }
      if (this.license_just == '') {
        return uni.showToast({
          title: '请上传驾驶证正面照',
          icon: 'none'
        });
      }
      if (this.license_back == '') {
        return uni.showToast({
          title: '请上传驾驶证反面照',
          icon: 'none'
        });
      }
      this.http('/driver/recruit', {
        driver_id: this.driverid,
        province: this.province,
        citys: this.citys,
        agency_name: this.agency_name,
        sources_name: this.sources_name,
        year: this.year,
        urgent_mobile: this.urgent_mobile,
        identity_just: this.identity_just,
        identity_back: this.identity_back,
        license_just: this.license_just,
        license_back: this.license_back
      }).then((res) => {
        console.log(res);
      });
    },
    // 获取招募来源
    async getorigin() {
      const res = await this.http('/index/sources');
      console.log('招募来源', res);
      this.requirelist = res.data;
    },
    // 获取机构列表
    async getjigou() {
      const res = await this.http('/index/agency');
      console.log('机构列表', res);
      this.organizationlist = res.data;
    },
    // 获取省市
    getcitys() {
      this.http('/index/citys', {
        pid: this.pid
      }).then((res) => {
        console.log(res);
        this.provinceData = res.data;
        console.log(this.provinceData);
      });
    },
    // 地址切换
    bindChange(e) {
      console.log(e.detail.value);
      this.provinceidnex = e.detail.value[0];
      this.cityindex = e.detail.value[1];
      this.provincename = this.provinceData[this.provinceidnex].name;
      if (this.provinceData[this.provinceidnex].list.length != 0) {
        this.cityname = this.provinceData[this.provinceidnex].list[this.cityindex].name;
      } else {
        this.cityname = '';
      }
      console.log(this.provincename, this.cityname);
    },
    // 确定地址
    fnok() {
      if (this.provinceData[this.provinceidnex].list.length != 0) {
        this.province = this.provinceData[this.provinceidnex].name;
        this.citys = this.provinceData[this.provinceidnex].list[this.cityindex].name;
      } else {
        this.province = this.provinceData[this.provinceidnex].name;
        this.citys = '';
      }
      console.log(this.province, this.citys);
      this.$refs.area.close();
    },
    // 机构切换
    organizationChange(e) {
      console.log('机构的切换', e.detail.value);
      this.agency_name = this.organizationlist[e.detail.value[0]].name;
      console.log(this.agency_name);
    },
    // 机构确认
    originazefn() {
      if (!this.agency_name) {
        this.agency_name = this.organizationlist[0].name;
      }
      console.log(this.agency_name);
      this.$refs.originaze.close();
    },
    // 招募切换
    requirechange(e) {
      console.log('招募切换', e.detail.value);
      this.sources_name = this.requirelist[e.detail.value[0]].name;
    },
    // 招募确定
    requirefn() {
      if (!this.sources_name) {
        this.sources_name = this.requirelist[0].name;
      }
      this.$refs.require.close();
    },
    // 年份切换
    agechange(e) {
      console.log('年份切换', e.detail.value);
      this.year = this.agelist[e.detail.value[0]];
    },
    // 年份确认
    agefn() {
      if (!this.year) {
        this.year = this.agelist[0];
      }
      this.$refs.age.close();
    },
    // 上传图片
    uploadimg(index) {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (e) => {
          uni.showLoading({
            title: '正在上传'
          });
          console.log('上传的那个图片', index);
          console.log('选择的图片', e.tempFiles[0].tempFilePath);
          uni.uploadFile({
            url: this.uploadurl + '/Common/upload', //仅为示例，非真实的接口地址
            filePath: e.tempFiles[0].tempFilePath,
            name: 'file',
            header: {
              token: uni.getStorageSync('token')
            },
            success: (data) => {
              uni.hideLoading();
              console.log(JSON.parse(data.data).data.url);
              if (index == 1) {
                this.identity_just = JSON.parse(data.data).data.url;
              } else if (index == 2) {
                this.identity_back = JSON.parse(data.data).data.url;
              } else if (index == 3) {
                this.license_just = JSON.parse(data.data).data.url;
              } else if (index == 4) {
                this.license_back = JSON.parse(data.data).data.url;
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 44rpx;
}
.flex1 {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 28rpx;
  color: #666666;
}
.container {
  box-sizing: border-box;
  .header {
    box-sizing: border-box;
    width: 750rpx;
    height: 20rpx;
    background: #f8f8f8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .content {
    box-sizing: border-box;
    padding: 0rpx 24rpx;
    .name {
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
    }
    .idcard {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 46rpx;
    }
    .carcard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
    }
    .subbtn {
      box-sizing: border-box;
      width: 654rpx;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
      background: #3483f6;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 42rpx;
      margin-left: 24rpx;
    }
  }
  .area {
    box-sizing: border-box;
    width: 750rpx;
    height: 776rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 48rpx;
    .head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
    }
  }
}
</style>